<template>
  <div class="recommend_list">
    <div class="part3_title">
      <!-- <div class="list_classics">
        <span class="nav-item">
            精选名著
        </span>
        <span class="nav-item">
            经典名著
        </span> 
        <span class="nav-item">
            畅销作品
        </span> -->
      <!-- </div> -->
      
      <van-tabs v-model="active" style="width: 70vw;background-color: transparent;">
        <van-tab title="精选名著">
          <book1></book1>
        </van-tab>
        <van-tab title="经典名著">
          <book2></book2>
        </van-tab>
        <van-tab title="畅销作品">
          <book3></book3>
        </van-tab>
      </van-tabs>


    </div>
  </div>
</template>

<style>
.van-tab__text--ellipsis{
  font-size: 16px
}
</style>

<style lang="less">
.van-tab{
  font-size: 18px !important;
}
.van-tabs__wrap{
  margin: 0 5vw;
  width: 90vw;
}

.van-tabs__nav {
  background-color: transparent !important;

  .van-tab--active {
    font-weight: bolder !important;
  }
}

.van-tabs__line {
  background-color: #ff9807 !important;
}

.recommend_list {
  margin-top: 20px;
  width: 100%;
  height: 36vh;
  // background-color: #fff7ea;

  .part3_title {
    width: 100%;

    .list_classics {
      position: relative;
      display: inline-flex;
      width: 100%;
      left: 0;
      line-height: 30px;

      span {
        margin: 0 1vw;
        font-size: 16px;
        color: rgb(149, 149, 149);
      }

      &.router-link-exact-active {
        color: #ff9807;
        font-weight: bold;
      }
    }
  }
}
</style>

<script>
import book1 from "../components/book1View.vue";
import book2 from "../components/book2View.vue";
import book3 from "../components/book3View.vue";

import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);

export default {
  name: "recommend_list",
  components: {
    book1,
    book2,
    book3,
  },
  data() {
    return {
      msg: "recommend_list",
      active:0,
    }
  }
};
</script>